<template>
    <div class="main-page">
        <el-form :model="childForm" label-width="70px" ref="addstuform"
                 size="mini">
            <span>合约期限</span>
            <el-row type="flex" justify="start">
                <el-col :span="8">
                    <el-form-item label="合约类型">
                        <el-radio-group v-model="radio2">
                            <el-radio :label="3">课时卡</el-radio>
                            <el-radio :label="6">时段卡</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="签约日期">
                        <el-date-picker style="width: 220px"
                                        v-model="childForm.endTime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="开始日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="截至日期">
                        <el-date-picker style="width: 220px"
                                        v-model="childForm.endTime"
                                        align="right"
                                        type="date"
                                        value-format="timestamp"
                                        placeholder="开始日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <span>合约信息</span>
            <el-row type="flex" justify="start">
                <el-col :span="6">
                    <el-form-item label="所在班级">
                        <el-select class="search-input-short" v-model="childForm.usertype" placeholder="请选择班级">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in usertypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="课时数">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="课程单价">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="课程金额">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="其他金额">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col >
                <el-col :span="6">
                    <el-form-item label="已上课时">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <span>折扣赠送</span>
            <el-row type="flex" justify="start">
                <el-col :span="8">
                <el-form-item label="合约类型">
                    <el-radio-group v-model="radio2">
                        <el-radio :label="3">课时卡</el-radio>
                        <el-radio :label="6">时段卡</el-radio>
                    </el-radio-group>
                </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="优惠金额">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="赠送课时">
                        <el-input size="mini" class="search-input-short" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="start">
                <el-col :span="10">
                    <el-form-item label="填写备注">
                        <el-input type="textarea" size="mini" class="search-input" v-model="childForm.name"
                                  placeholder="必填"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="allchargedesc" type="flex" jus tify="center">
                <el-col :span="6">
                    <span>学员姓名:小明</span>
                </el-col>
                <el-col :span="6">
                    <span>总金额：12元</span>
                </el-col>
                <el-col :span="6">
                    <span>已优惠:1元</span>
                </el-col>


            </el-row>

        </el-form>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: 'addSubject',
        props: {},
        data() {
            return {
                childForm: {}
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['adminInfo'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),
        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';
    .allchargedesc {
        color: #ffffff;
        background-color: #8c939d;
        padding: 6px;
    }
    .el-table .sks {
        background: #c2e7b0;
    }
</style>
